<template>
	<view class="container">

		<custom background="#F5F5F5" title="书城首页"></custom>
		<view class="head">

			<view class="parent-container">
				<view class="swiper-container">
					<swiper
						style="	height: 200px;	border-radius: 15px; 	background: linear-gradient(to right, #f6e6cf, #eec5b1);"
						:autoplay="autoplay" :interval="interval" :duration="duration" circular indicator-dots>
						<swiper-item v-for="(item, index) in bookRecommended.list" :key="index" :current="index"
							@click="gotoBook(item)">
							<view class="iteml">
								<view class="zbtj">
									<text>主编推荐</text>
								</view>
								<view class="item">
									<!--  mode="widthFix" -->
									<image class="cover" :src="item.cover_img" lazy-load></image>

									<view class="box">

										<view class="title">
											<text>{{ item.name }}</text>
										</view>

										<view class="desc">{{ item.synopsis }}</view>

										<view class="tags">
											<view class="tag">
												{{(item.frequency / 10000).toFixed(0)}}W人看
											</view>
											<view class="tag" v-for="tag in item.novel_type_name?.split(',')"
												:key="tag">
												{{ tag }}
											</view>
											<view class="tag">
												已完结
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="tagbook-lists">
				<view class="tagbook-list">
					<view class="gotolink" @click="gotolinks('/pages/bookshelf/index1')">
						<image class="icon" src="/static/bookBar/rank.svg" lazy-load />
						<view class="tagbox" aria-label="排行榜">排行榜</view>
					</view>
					<view class="gotolink" @click="gotolinks('/pages/bookshelf/index2')">
						<image class="icon" src="/static/bookBar/new.svg" lazy-load />
						<view class="tagbox" aria-label="新书推荐">新书推荐</view>
					</view>
					<view class="gotolink" @click="gotolink('/pages/bookshelf/record')">
						<image class="icon" src="/static/bookBar/record.svg" lazy-load />
						<view class="tagbox" aria-label="阅读记录">阅读记录</view>
					</view>
					<view class="gotolink" @click="gotolink('/pages/my/index')">
						<image class="icon" src="/static/bookBar/vip.svg" lazy-load />
						<view class="tagbox" aria-label="会员中心">会员中心</view>
					</view>
				</view>
			</view>
			<view class="jpcentered-text-with-dots"> 金牌新书榜 </view>
			<view class="jpbook-lists">
				<view class="jpitem" v-for="(item, index) in list3.list" :key="index" @click="gotoBook(item)">
					<view class="jpitems">
						<!--  mode="widthFix" -->
						<image class="jpcover" :src="item.cover_img" lazy-load></image>

						<view class="jpbox">
							<view class="jptitle"> <text class="jptext_tag"
									:style="{'background' : pickColor(index) , 'color' : index != 0 && index != 1 && index != 2? 'rgb(118,118,118)' : '#fff' }">{{index + 1}}</text>

								<text>{{ item.name }}</text>
							</view>

							<view class="jpdesc">{{ item.synopsis }}</view>

							<view class="jptags">
								<view class="jptag" v-for="tag in item.novel_type_name?.split(',')" :key="tag">{{ tag }}
								</view>
								<view class="jphot_tag" v-if="item.frequency">
									<image src="../../static/bookBar/hot.svg" mode=""></image>
									{{(item.frequency / 10000).toFixed(1)}}W人看过
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="centered-text-with-dots"> 猜你喜欢 </view>
			<view class="book-lists">

				<view class="bookitem" v-for="(item, index) in list20.list" :key="index" @click="gotoBook(item)">
					<view class="book">
						<!--  mode="widthFix" -->
						<view class="imgback">
							<view class="backtag">
								已完结
							</view>
							<image class="bookcover" :src="item.cover_img" lazy-load></image>
						</view>


						<view class="bookbox">
							<view class="booktitle">
								<text>{{ item.name }}</text>
							</view>

							<view class="bookdesc">{{ item.synopsis }}</view>

							<view class="booktags">

								<view class="tag" v-for="tag in item.novel_type_name?.split(',')" :key="tag">
									{{ tag }} | {{(item.frequency / 10000).toFixed(0)}}W人看
								</view>

							</view>
						</view>
					</view>


				</view>

			</view>

		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, watch, defineProps } from 'vue'
	import { onShow, onReachBottom } from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'
	import Tabs from './components/Tabs.vue'
	import BookshelfList from './components/BookshelfList.vue'
	import RecommendList from './components/RecommendList.vue'
	import ReadingHistoryList from './components/ReadingHistoryList.vue'
	import {
		getBookshelfList,
		getBookRecommendedList,
		getRecordsList,
		delBookshelf,
		delRecords
	} from '@/api/index'
	import { BookItem, ReadingBook } from '@/types/index'
	import { toast } from '@/utils/index'
	import { useUserStore } from '@/stores/user'
	import { bookMallList, bookMallList3 } from '@/api/index'
	import { getNovelinfo, chapterrecores } from "@/api/toutiao";

	// 定义接收的props类型
	interface Slide {
		image : string;
	}

	interface Props {
		slides : Slide[];
		autoplay ?: boolean;
		interval ?: number;
		duration ?: number;
	}

	// 接收props
	const props = defineProps<Props>();



	// 在这个例子中，我们直接使用props中的值，因为它们已经提供了默认值
	const autoplay = true;
	const interval = 3000;
	const duration = 500;


	const pickColor = (index) => {
		switch (index + 1) {
			case 1:
				return 'red';
				break;
			case 2:
				return 'rgb(255,105,64)';
				break;
			case 3:
				return 'rgb(252,159,50)';
				break;
			default:
				return 'rgb(238,238,238)';
		}
	}
	const emit = defineEmits(['click'])
	const clickFun = (e : any) => {
		console.log(e)
		emit('click', e)
	}
	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)

	const searchValue = ref('')
	const tab = ref(1)
	const isEdit = ref(false)
	const activeList = ref<number[]>([])

	const clickEdit = () => {
		isEdit.value = !isEdit.value
		activeList.value = []
		if (isEdit.value) {
			uni.hideTabBar()
		} else {
			uni.showTabBar()
		}
	}

	const bookshelfList = ref<BookItem[]>([])

	const _getBookshelfList = async () => {
		try {
			bookshelfList.value = await getBookshelfList({
				name: searchValue.value
			}) || []
		} catch (e) {
			//TODO handle the exception
		}
	}

	const searchList = () => {
		if (tab.value == 1) {
			bookshelfList.value = []
			_getBookshelfList()
		}
	}

	const bookRecommended = reactive({
		page: 1,
		limit: 10,
		totalPage: 0,
		list: []
	})
	const list20 = reactive({
		page: 1,
		limit: 20,
		totalPage: 0,
		list: []
	})
	const list3 = reactive({
		page: 1,
		limit: 3,
		totalPage: 0,
		list: []
	})

	const _getBookRecommendedList = async () => {
		try {
			const res = await getBookRecommendedList({
				page: bookRecommended.page,
				limit: bookRecommended.limit
			})
			bookRecommended.list = bookRecommended.list.concat(res.data)
			bookRecommended.totalPage = res.total_page
		} catch (e) {
			//TODO handle the exception
		}
	}

	const recordsList = ref<ReadingBook[]>([])

	const _getRecordsList = async () => {
		try {
			recordsList.value = await getRecordsList() || []
		} catch (e) {
			//TODO handle the exception
		}
	}

	const init = () => {
		if (tab.value == 1) {
			_getBookshelfList()
			bookRecommended.page = 1
			bookRecommended.totalPage = 0
			bookRecommended.list = []
			list20.list = []
			list3.list = []
			getList()
			getList3()
			_getBookRecommendedList()
		} else {
			_getRecordsList()
		}
	}

	watch(tab, () => {
		searchValue.value = ''
		if (isEdit.value) {
			clickEdit()
		}
		init()
	})

	const delBooks = async () => {
		try {
			if (tab.value == 1) {
				await delBookshelf({
					ids_string: activeList.value.join(',')
				})
				_getBookshelfList()
			} else {
				await delRecords({
					ids_string: activeList.value.join(',')
				})
				_getRecordsList()
			}
			activeList.value = []
			toast('删除成功')
			clickEdit()
		} catch (e) {
			//TODO handle the exception
		}
	}
	const getList = async () => {
		try {
			const userStore = useUserStore()
			const res = await bookMallList({
				page: list20.page,
				limit: list20.limit,

				app_id: userStore.loginInfo.app_id,
				novel_type: 1
			})
			list20.list = list20.list.concat(res.data)
			list20.totalPage = res.total_page;
		} catch (e) {
			//TODO handle the exception
		}
	}
	const getList3 = async () => {
		try {
			const userStore = useUserStore()
			const res = await bookMallList3({
				page: list3.page,
				limit: list3.limit,

				app_id: userStore.loginInfo.app_id,
				novel_type: 1
			})
			list3.list = list3.list.concat(res.data)
			list3.totalPage = res.total_page;
		} catch (e) {
			//TODO handle the exception
		}
	}
	//跳转详情
	const gotoBook = async (item) => {
		if (!item) return
		uni.navigateTo({
			url: `plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=${item.book_id}&blockUnpaidScroll=1`
		})

	}
	//跳转详情
	const gotolink = async (item) => {
		if (!item) return
		console.log(item)
		uni.switchTab({
			url: item,
		});

	}
	const gotolinks = async (item) => {
		if (!item) return
		console.log(item)
		uni.navigateTo({
			url: item,
		});

	}

	onShow(() => {
		init()
	})

	onReachBottom(() => {
		if (bookRecommended.page >= bookRecommended.totalPage) return
		bookRecommended.page++
		_getBookRecommendedList()
	})
</script>

<style scoped lang="scss">
	.head {
		background: #f8f8f8;
		position: relative;

		.parent-container {
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中，但通常用于子元素为flex项目时 */
			height: 200px;
			/* 使父容器占据整个视口高度 */
			width: 95%;
			/* 或设置一个具体的宽度 */
			margin: 2.5%;
		}

		.swiper-container {
			width: 100%;
			height: 100%;
			overflow: hidden;

		}

		.swiper {
			justify-content: center;
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.swiper-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			/* 确保图片覆盖整个容器 */
		}

		.right {
			position: absolute;
			top: 50%;
			right: 10rpx;
			transform: translateY(-50%);

			.btn {
				padding: 20rpx;
				@include tx(28rpx);
				color: #2B2B2B;
				transition: all .2s;

				&.edit {
					color: #A5A5A5;
				}
			}
		}
	}

	.zbtj {
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中（如果需要的话） */
		text-align: center;
		/* 确保文本在视口中居中（虽然flex布局下通常不需要） */
		padding: 0 10px;
		/* 左右内边距，用于创建点与文本之间的空间 */
		position: relative;
		/* 使用相对定位以便添加绝对定位的点 */
		color: #FF5E8E;
		font-weight: bold;
		font-size: 16px;
		margin-top: 1%;

	}

	/* 添加左右两边的点 */
	.zbtj::before,
	.zbtj::after {
		content: '•';
		/* 使用点字符 */
		position: absolute;
		/* 绝对定位 */
		top: 50%;
		/* 垂直居中（相对于父元素） */
		transform: translateY(-50%);
		/* 通过transform调整垂直居中 */
		color: #eec5b1;
		/* 点的颜色（与文本颜色相同或不同） */
		font-size: 20px;
		/* 点的字体大小（根据需要调整） */
	}

	.zbtj::before {
		left: 38%;
		/* 左点定位在父元素左侧 */
	}

	.zbtj::after {
		right: 38%;
		/* 右点定位在父元素右侧 */
	}

	.item {
		padding: 0rpx 30rpx 0rpx 30rpx;
		background: #FEFEFE;
		height: 140px;
		border-radius: 15px;
		/* 设置圆角半径，值越大圆角越明显 */
		background: linear-gradient(to right, #f6e6cf, #eec5b1);
		@include flex($align: center);
		flex-wrap: nowrap;

		.cover {
			@include size(160rpx, 232rpx);
			border-radius: 8rpx;
			overflow: hidden;
			height: 119px;
			width: 90px;
		}

		.box {
			margin-left: 24rpx;
			flex: 1;
			overflow: hidden;
			height: 120px !important;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.title {
				@include tx(32rpx);
				color: #373737;
				font-weight: 600;
				// @include omit(1);
				display: flex;
				align-items: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				line-height: 1rem;
				height: 1rem;
				width: 100%;

				text {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 87%;
					color: #552a0e;
					/*  #ifdef  MP-WEIXIN  */

					font-size: 1rem;
					/* #endif  */
					/*  #ifndef  MP-WEIXIN  */
					font-size: 0.8rem;
					/* #endif  */

				}

				.text_tag {
					display: inline-block;
					/* #ifndef MP-KUAISHOU */
					width: 1rem;
					height: 1rem;
					/* #endif */
					/* #ifdef MP-KUAISHOU */
					width: 1rem;
					height: 1rem;
					/* #endif */
					background: red;
					color: #fff;
					margin-right: 0.2rem;
					overflow: hidden;
					font-size: 0.6rem;
					border-radius: 0.2rem;
					text-align: center;
					flex: none;
				}
			}

			.desc {
				// margin: 20rpx 0;
				@include tx(28rpx, 40rpx);
				// -webkit-line-clamp: 2 !important;
				color: #cb936e;
				//	height: 40px;
				@include omit(3);


				font-size: 0.8rem;
			}

			.tags {
				@include flex($align: center);

				.tag {
					padding: 8rpx 12rpx;
					@include tx(24rpx);
					color: #373737;
					background: #FCF0E9;
					border-radius: 8rpx;
					margin-right: 0.2rem;

					&+.tag {
						margin-left: 12rpx;
					}
				}

				.hot_tag {
					image {
						@include size(24rpx);
						margin-right: 0.1rem;
					}

					color: rgb(148, 148, 148);
					@include tx(24rpx);
				}
			}
		}
	}

	.book-lists {
		padding: 0% 2.5% 2.5% 2.5%;
		display: flex;
		flex-wrap: wrap;
	}

	.bookitem {
		width: 47%;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 10px;
		margin-top: 20px;
	}

	/* Ensuring the second bookitem in each row is positioned correctly */
	.bookitem:nth-child(even) {
		margin-left: 5%;
		/* 5% space between books */
	}

	/* Adjusting for the first row where we don't want left margin */
	.bookitem:nth-child(1) {
		margin-left: 0;
	}

	/* Resetting the margin for every second bookitem after the first row */
	.bookitem:nth-child(4n+2) {
		margin-left: 5%;
		transform: translateX(0);
		/* Reset transform for correct positioning */
	}


	.book {
		/* 书籍的具体样式 */
	}

	.imgback {
		background: linear-gradient(to right, #d6ccce, #e1e9f1);
		border-radius: 3px;
		position: relative;
		/* 设置为相对定位容器 */
		width: 100%;
		/* 或您希望的任何宽度 */
		height: 100px;
		/* 或您希望的任何高度，确保有足够空间显示图片和标签 */
		/* 根据需要添加其他样式，如背景色、内边距等 */
	}

	.backtag {
		width: 35px;
		text-align: center;
		position: absolute;
		/* 设置为绝对定位 */
		font-size: 10px;
		color: #373737;
		background: #FCF0E9;

		/* 内边距 */
		border-top-left-radius: 3px;
		/* 设置左上角的圆角半径 */
		border-bottom-right-radius: 3px;
		/* 设置右下角的圆角半径 */
		/* 圆角 */
	}

	.bookcover {
		display: block;
		/* 移除图片底部的默认间隙 */
		margin: 0 auto;
		/* 水平居中 */
		width: 80px;
		/* 图片最大宽度不超过容器 */
		height: 100px;
		/* 保持图片比例 */
		/* 如果需要垂直居中，且.imgback高度固定，可以考虑以下方式之一：
     1. 使用绝对定位并调整top值（需要知道图片高度或计算）
     2. 使用flexbox的align-items: center（如果.imgback高度可变且希望图片垂直居中）
     但在这个案例中，我们假设图片不需要垂直居中，或.imgback的高度足以显示整张图片。
  */
	}



	.bookbox {

		.booktitle {

			width: 100%;
			font-size: 15px;
			/* 根据你的设计需求调整 */
			font-weight: bold;
			/* 可选，用于突出标题 */

			/* 控制文本溢出 */
			white-space: nowrap;
			/* 禁止文本换行 */
			overflow: hidden;
			/* 隐藏溢出部分 */
			text-overflow: ellipsis;
			/* 用省略号表示被截断的文本 */

			/* 可选：设置最大高度和行高来确保只显示一行 */
			line-height: 1.5;
			/* 根据你的字体大小调整，确保行高与字体大小相匹配以只显示一行 */
			max-height: 1.5em;
			/* 与行高相同，确保只显示一行（em单位基于字体大小） */
			padding: 2.5%;
			color: #403e3e;



		}

		.bookdesc {
			padding: 2.5%;
			width: 90%;
			font-size: 12px;

			overflow: hidden;
			/* 隐藏溢出部分 */
			text-overflow: ellipsis;
			/* 省略号表示被截断的文本，但这主要用于单行文本 */

			/* 对于多行文本溢出 */
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* 显示2行 */
			-webkit-box-orient: vertical;
			/* 垂直方向排列 */

			/* 可选：确保只显示两行，基于12px的字体大小 */
			line-height: 1.5;
			/* 假设一个稍微宽松的行高 */
			max-height: calc(12px * 1.4 * 2);
			/* 两行的高度，基于1.5的行高和12px的字体大小 */

			color: #8c8989;
		}


		.booktags {
			padding: 2.5%;
			color: #8c8989;
			font-size: 12px;

			.tags {
				@include flex($align: center);

				.tag {
					padding: 8rpx 12rpx;
					@include tx(24rpx);
					color: #373737;
					background: #FCF0E9;
					border-radius: 8rpx;
					margin-right: 0.2rem;

					&+.tag {
						margin-left: 12rpx;
					}
				}

				.hot_tag {
					image {
						@include size(24rpx);
						margin-right: 0.1rem;
					}

					color: rgb(148, 148, 148);
					@include tx(24rpx);
				}
			}
		}
	}

	.centered-text-with-dots {
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中（如果需要的话） */
		text-align: center;
		/* 确保文本在视口中居中（虽然flex布局下通常不需要） */
		padding: 0 10px;
		/* 左右内边距，用于创建点与文本之间的空间 */
		position: relative;
		/* 使用相对定位以便添加绝对定位的点 */
		color: #FF5E8E;
		font-weight: bold;
		/* 文本颜色（可选） */
		background: #f8f8f8;
		/* 背景颜色（可选，用于演示） */
	}

	/* 添加左右两边的点 */
	.centered-text-with-dots::before,
	.centered-text-with-dots::after {
		content: '•';
		/* 使用点字符 */
		position: absolute;
		/* 绝对定位 */
		top: 50%;
		/* 垂直居中（相对于父元素） */
		transform: translateY(-50%);
		/* 通过transform调整垂直居中 */
		color: #eec5b1;
		/* 点的颜色（与文本颜色相同或不同） */
		font-size: 20px;
		/* 点的字体大小（根据需要调整） */
	}

	.centered-text-with-dots::before {
		left: 38%;
		/* 左点定位在父元素左侧 */
	}

	.centered-text-with-dots::after {
		right: 38%;
		/* 右点定位在父元素右侧 */
	}



	.jpbook-lists {



		flex-wrap: wrap;
	}

	.jpcentered-text-with-dots {
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中（如果需要的话） */
		text-align: center;
		/* 确保文本在视口中居中（虽然flex布局下通常不需要） */
		padding: 0 10px;
		/* 左右内边距，用于创建点与文本之间的空间 */
		position: relative;
		/* 使用相对定位以便添加绝对定位的点 */
		color: #FF5E8E;
		font-weight: bold;
		/* 文本颜色（可选） */
		background: #f8f8f8;
		/* 背景颜色（可选，用于演示） */
	}

	/* 添加左右两边的点 */
	.jpcentered-text-with-dots::before,
	.jpcentered-text-with-dots::after {
		content: '•';
		/* 使用点字符 */
		position: absolute;
		/* 绝对定位 */
		top: 50%;
		/* 垂直居中（相对于父元素） */
		transform: translateY(-50%);
		/* 通过transform调整垂直居中 */
		color: #eec5b1;
		/* 点的颜色（与文本颜色相同或不同） */
		font-size: 20px;
		/* 点的字体大小（根据需要调整） */
	}

	.jpcentered-text-with-dots::before {
		left: 36%;
		/* 左点定位在父元素左侧 */
	}

	.jpcentered-text-with-dots::after {
		right: 36%;
		/* 右点定位在父元素右侧 */
	}

	.jpitem {
		padding: 2.5%;

		.jpitems {
			background: #ffffff;

			//		background: #ffffff;
			border-radius: 20rpx;
			@include flex($align: center);
			flex-wrap: nowrap;

			.jpcover {
				@include size(200rpx, 250rpx);
				border-radius: 8rpx;
				overflow: hidden;
			}

			.jpbox {
				margin-left: 24rpx;
				flex: 1;
				overflow: hidden;
				height: 120px !important;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.jptitle {
					//	@include tx(30rpx);
					font-size: 15px;
					color: #403e3e;
					font-weight: bold;
					font-weight: 600;
					// @include omit(1);
					display: flex;
					align-items: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					line-height: 1rem;
					height: 1rem;
					width: 100%;

					text {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 87%;

						/*  #ifdef  MP-WEIXIN  */

						font-size: 1rem;
						/* #endif  */
						/*  #ifndef  MP-WEIXIN  */
						font-size: 0.8rem;
						/* #endif  */

					}

					.jptext_tag {
						display: inline-block;
						/* #ifndef MP-KUAISHOU */
						width: 1rem;
						height: 1rem;
						/* #endif */
						/* #ifdef MP-KUAISHOU */
						width: 1rem;
						height: 1rem;
						/* #endif */
						background: red;
						color: #fff;
						margin-right: 0.2rem;
						overflow: hidden;
						font-size: 0.6rem;
						border-radius: 0.2rem;
						text-align: center;
						flex: none;
					}
				}

				.jpdesc {
					margin: 20rpx 0;
					@include tx(28rpx, 40rpx);
					// -webkit-line-clamp: 2 !important;
					color: #898989;
					//height: 40px;
					@include omit(3);
					/*  #ifdef  MP-WEIXIN  */

					font-size: 0.8rem;
					/* #endif  */
					/*  #ifndef  MP-WEIXIN  */
					font-size: 0.8rem;
					/* #endif  */
				}

				.jptags {
					@include flex($align: center);

					.jptag {
						padding: 8rpx 12rpx;
						@include tx(24rpx);
						color: #E46125;
						background: #FCF0E9;
						border-radius: 8rpx;
						margin-right: 0.2rem;

						&+.tag {
							margin-left: 12rpx;
						}
					}

					.jphot_tag {
						image {
							@include size(24rpx);
							margin-right: 0.1rem;
						}

						color: rgb(148, 148, 148);
						@include tx(24rpx);
					}
				}
			}
		}

	}

	.tagbook-lists {
		padding: 2.5%;
		border-radius: 20rpx;
	}

	.tagbook-list {
		font-weight: 500;
		display: flex;
		justify-content: space-between;
		/* 或者使用 space-around，根据你的喜好 */
		flex-wrap: nowrap;
		/* 确保不换行 */
		background: #ffffff;
		/* 可选，用于增加内部间距 */
		box-sizing: border-box;
		/* 确保 padding 不会影响整体宽度 */
	}

	.gotolink {
		flex: 1;
		/* 平均分配空间 */
		display: flex;
		flex-direction: column;
		/* 垂直排列内部元素 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中（如果内部有额外的水平空间） */
		text-align: center;
		/* 文字居中 */
		padding: 10px;
		/* 可选，用于增加每个项目的内部间距 */
		box-sizing: border-box;
		/* 确保 padding 不会影响分配的宽度 */
	}

	.icon {
		width: 40px;
		/* 根据需要调整图标大小 */
		height: 40px;
		/* 根据需要调整图标大小 */
		display: inline-block;
	}

	.tagbox {
		//	@include tx(30rpx);
		font-size: 14px;
		color: #8c8989;
		font-weight: bold;
	}

	.jpbox {
		margin-top: 5px;
		/* 可选，用于增加图标和文本之间的间距 */
	}
</style>